<template>
	<view class="box">
		<u-sticky bgColor="#fff">
			<u-tabs :list="list" :lineWidth="80" lineColor="#0F53AC" :activeStyle="activeStyle" :scrollable="false"
				:inactiveStyle="inactiveStyle" :itemStyle="itemStyle" @click="tabsClick" :current="current">
			</u-tabs>
			<view class="serachTop">
				<view class="sel">
					<zb-dropdown-menu :zIndex="89" @toggleItem="toggleItem(2)" ref="dropdown1" active-color="#0F53AC">
						<zb-dropdown-item :options="option" v-model="value1" @change="change1" name="first">
						</zb-dropdown-item>
					</zb-dropdown-menu>
				</view>
				<u-search class="inp" placeholder="搜索隐患位置" v-model="keyword" height="40" shape="square" color="#2B2B2B" :showAction="false" @change="searchChange"
					@search="searchChange"></u-search>
			</view>
		</u-sticky>
		<view class="main-list" @click="handleTo(item)" v-for="item in hiddenList" :key="item.id">
			<view class="title">
				<view class="title-left">
					<view class="left-text">{{item.dangerSite}}</view>
				</view>
				<view class="tag-warning" v-if="item.dangerStatus == 1">
					未整改
				</view>
				<view class="tag-main" v-if="item.dangerStatus == 3">
					待复查
				</view>
				<view class="tag-warning" v-if="item.dangerStatus == 2">
					重新整改
				</view>
				<view class="tag-success" v-if="item.dangerStatus == 4">
					整改完成
				</view>
			</view>
			<view class="content">{{item.dangerDesc}}</view>
			<view class="times">
				<view class="plan">{{item.planName }}</view>
				<view class="yuqi" v-if="item.overFlag">
					已逾期
				</view>
				<!-- <u-icon name="arrow-right"></u-icon> -->
			</view>
		</view>

		<u-loadmore v-if="total>6" :status="status" :line="true" />
		<view class="empty-data" v-if="hiddenList.length==0">
			<u-empty mode="data" :marginTop="100"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeStyle: {
					color: '#0F53AC',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				},
				inactiveStyle: {
					color: '#8c8c8c',
					transform: 'scale(1)'
				},
				itemStyle: {
					paddingLeft: '30rpx',
					paddingRight: '30rpx',
					paddingTop: '24rpx',
					paddingBottom: '24rpx',
					height: '48rpx'
				},
				current: 0,
				list: [{
					name: '全部隐患',
				}, {
					name: '与我相关',
				}],
				option: [{
						text: '全部隐患状态',
						value: -1
					}, {
						text: '未整改',
						value: 1
					},
					{
						text: '待复查',
						value: 3
					},
					{
						text: '重新整改',
						value: 2
					}, 
					{
						text: '整改完成',
						value: 4
					}
				],
				value1: -1,
				keyword: '',
				params: {
					pn: 1,
					ps: 6,
					type: 1, //1.全部隐患；2.与我有关
					dangerStatus: -1,
					keyword: ''
				},
				status: 'loadmore',
				pages: 1,
				total: 0,
				hiddenList: [],
				flag:false
			}
		},
		onShow() {
			this.params.pn = 1;
			this.hiddenList = []
			this.getList()
			this.getListNum()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.params.pn = 1;
			this.hiddenList = []
			this.getList()
			this.getListNum()
		},
		methods: {
			tabsClick(e) {
				this.current = e.index
				this.params.pn = 1;
				this.params.type = e.index + 1;
				this.params.dangerStatus = -1;
				this.value1 = -1
				this.params.keyword = ''
				this.keyword = ''
				this.hiddenList = []
				if(!this.flag){
					this.getList()
				}
				this.getListNum()
			},
			getList() {
				this.flag = true
				uni.$u.http.post(`/check/mobile/appDangerInfo/dangerListByPage`, this.params).then(res => {
					if (res.code == 0) {
						this.flag = false
						uni.stopPullDownRefresh();
						this.hiddenList = this.hiddenList.concat(res.data.records)
						this.pages = res.data.pages;
						this.total = res.data.total;
						// uni.stopPullDownRefresh()
					}
				}).catch(err => {})
			},
			getListNum() {
				let params1 = {
					pn: 1,
					ps: 6,
					type: 1, //1.全部隐患；2.与我有关
				}
				uni.$u.http.post(`/check/mobile/appDangerInfo/dangerListByPage`, params1).then(res => {
					if (res.code == 0) {
						this.list[0].name = `全部隐患(${res.data.total})`
					}
				}).catch(err => {})

				let params2 = {
					pn: 1,
					ps: 6,
					type: 2, //1.全部隐患；2.与我有关
				}
				uni.$u.http.post(`/check/mobile/appDangerInfo/dangerListByPage`, params2).then(res => {
					if (res.code == 0) {
						this.list[1].name = `与我相关(${res.data.total})`
					}
				}).catch(err => {})

			},
			handleTo(item) {
				uni.navigateTo({
					url: `/pages/subPackagesA/troble/notRectified?dangerStatus=${item.dangerStatus}&id=${item.id}&reviewFlag=${item.reviewFlag}`
				})
			},

			toggleItem(val) {
				console.log(val)
				if (val == 1) {
					this.$refs.dropdown1.close()
				}
			},

			change1(val) {
				console.log('===========', val, this.value1)
				this.hiddenList = [];
				this.params.pn = 1;
				this.params.type = this.current + 1;
				this.params.dangerStatus = this.value1;
				this.params.keyword = this.keyword
				if(!this.flag){
					this.getList()
				}
			},

			searchChange(val) {
				this.hiddenList = [];
				this.params.pn = 1;
				this.params.type = this.current + 1;
				this.params.dangerStatus = this.value1
				this.params.keyword = this.keyword
				if(!this.flag){
					this.getList()
				}
			}

		},
		onReachBottom() {
			if (this.params.pn >= this.pages) return;
			this.status = 'loading';
			this.params.pn = ++this.params.pn;
			setTimeout(() => {
				this.getList()
				if (this.params.pn >= this.pages) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		.serachTop {
			display: flex;
			padding: 8rpx 32rpx;
			border-top: 1px solid #EDEDED;
			// border-bottom: 1px solid #EDEDED;

			.sel {
				width: 40%;
			}

			.inp {
				width: 60% !important;
			}
		}

		.main-list {
			padding: 32rpx;
			border-top: 1px solid #f2f2f2;

			.title {
				display: flex;
				justify-content: space-between;
				font-size: 34rpx;
				margin-bottom: 20rpx;

				.title-left {
					display: flex;
					width: 70%;
					word-wrap: break-word;
					word-break: break-all;
					align-items: center;

					.left-text {
						line-height: 52rpx;
						margin-right: 32rpx;
						overflow: hidden; //超出的文本隐藏
						text-overflow: ellipsis; //溢出用省略号显示
						white-space: nowrap; // 默认不换行；
					}
				}
			}

			.content {
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden; //溢出内容隐藏
				text-overflow: ellipsis; //文本溢出部分用省略号表示
				display: -webkit-box; //特别显示模式
				-webkit-line-clamp: 2; //行数
				line-clamp: 2;
				-webkit-box-orient: vertical; //盒子中内容竖直排列
				font-size: 28rpx;
				color: #4D4D4D;
				margin-bottom: 20rpx;
				word-wrap: break-word;
				word-break: break-all;
			}

			.times {
				display: flex;
				// justify-content: space-between;
				font-size: 28rpx;
				color: #8C8C8C;

				.plan {
					max-width: 200rpx;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; // 默认不换行；
					border-radius: 4px;
					border: 1px solid #0F53AC;
					color: rgba(15, 83, 172, 1);
					padding: 4px 12px 4px 12px;
					margin-right: 20rpx;
				}

				.yuqi {
					border-radius: 4px;
					border: 1px solid #FF4D4D;
					color: rgba(255, 77, 77, 1);
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 4px 12px 4px 12px;
				}

			}
		}

	}
</style>